<template>
  <div class="city over-tabbar">
    <div class="top">
      <van-search @cancel="handlerCancel" v-model="searchValue" shape="round" placeholder="城市/区域/位置" show-action />
      <van-tabs v-model:active="tabActive" color="#ff9854">
        <template v-for="(value, key, index) in allCities" :key="key">
          <van-tab :title="value.title" :name="key"></van-tab>
        </template>
      </van-tabs>
    </div>
    <div class="content">
      <!-- 因为重新获取数据导致页面卡顿，所以直接遍历出两个，通过v-show控制显示，优化性能 -->
      <template v-for="(value, key, index) in allCities" :key="index">
        <cityGroup v-show="key === tabActive" :currentCityGroup="value"></cityGroup>
      </template>
    </div>

  </div>
</template>

<script setup>
import { ref, toRefs, computed } from 'vue';
import useCityStore from "@/store/modules/city.js"
const cityStore = useCityStore()
import cityGroup from './cpns/city-group.vue';
import { useRouter } from 'vue-router';
const router = useRouter()

// 获取选中tab的name
const tabActive = ref()


// 获取当前选择的cityGroup
const currentCityGroup = computed(() => allCities.value[tabActive.value])


cityStore.getAllCities()

const { allCities } = toRefs(cityStore)


const searchValue = ref("")

function handlerCancel() {
  router.push("/home")
}
</script>

<style lang="less" scoped>
.top {
  position: relative;
  z-index: 9;
  --van-tabs-line-height: 46px;
}

.content {
  height: calc(100vh - 98px);
  overflow-y: auto;
}
</style>